<template>
    <el-container class="container">
        <el-aside
            class="sider"
            :width="isSiderCollapse ? '64px' : '180px'"
        >
            <img src="../../assets/images/logo.png" alt="">
            <el-menu
                :default-active="menuList[0].path"
                :collapse="isSiderCollapse"
                :collapseTransition="false"
                router
            >
                <el-menu-item
                    v-for="menu in menuList"
                    :key="menu.name"
                    :index="menu.path"
                >
                    <i :class="menu.icon + ' icon'"></i>
                    <span slot="title">{{ menu.label }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="header" height="50px">
                <i class="el-icon-s-fold" @click="isSiderCollapse = !isSiderCollapse" />
                <div>江苏传智播客教育科技股份有限公司</div>
                <el-tag
                    size="small"
                    color="rgba(255, 255, 255, .3)"
                    :hit="true"
                    effect="dark"
                >
                    专业版
                </el-tag>
                <div class="flex-box"></div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        张三<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>首页</el-dropdown-item>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import * as api from '../../api/user';
export default {
    data () {
        return {
            isSiderCollapse: false,
            // 权限控制
            menuList: [
                {
                    icon: 'el-icon-eleme',
                    label: '首页',
                    path: '/',
                },
                {
                    icon: 'el-icon-shopping-cart-2',
                    label: '组织架构',
                    path: '/structure',
                },
                {
                    icon: 'el-icon-user',
                    label: '员工',
                    path: '/employees',
                },
            ],
        };
    },
    
}
</script>

<style lang="less" scoped>
    @import url('./main.less');
</style>